<!--
 * @Description  : 
 * @Author       : zhao
 * @Date         : 2022-07-20 10:17:39
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-17 09:10:48
-->
<!-- 模态窗 -->
<template>
    <div class="">
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">
                <el-form-item label="介绍信：" prop="IntroductionLetter.name">
                    <div class="upload">
                        <a
                            href="javascript:void(0)"
                            :title="form.IntroductionLetter.name"
                            @click="getServerFile('IntroductionLetter')"
                            class="ellipsis"
                        >
                            {{ form.IntroductionLetter.name }}
                        </a>

                        <input
                            type="file"
                            style="display: none"
                            ref="IntroductionLetter"
                            @change="(checked) => handleClick(checked, 'IntroductionLetter')"
                        />
                        <i class="el-icon-folder cursor" @click="getFile('IntroductionLetter')"></i>
                        <span class="file_state"> <i class="el-icon-circle-check" :class="IntroductionLetterState"></i></span>
                    </div>
                </el-form-item>
                <el-form-item label="任务书：" prop="Assignment.name">
                    <div class="upload">
                        <a href="javascript:void(0)" :title="form.Assignment.name" class="ellipsis" @click="getServerFile('Assignment')">
                            {{ form.Assignment.name }}
                        </a>

                        <input type="file" style="display: none" ref="Assignment" @change="(checked) => handleClick(checked, 'Assignment')" />
                        <i class="el-icon-folder cursor" @click="getFile('Assignment')"></i>
                        <span class="file_state"> <i class="el-icon-circle-check" :class="AssignmentState"></i></span>
                    </div>
                </el-form-item>
                <el-form-item label="涉密证书编号：" prop="CertificateNo">
                    <el-input v-model="form.CertificateNo"></el-input>
                </el-form-item>
                <el-form-item label="资料使用范围：" prop="DataUseArea">
                    <el-input v-model="form.DataUseArea"></el-input>
                </el-form-item>
                <el-form-item label="资料用途：" prop="DataPurpose">
                    <el-input
                        v-model="form.DataPurpose"
                        placeholder="请输入项目名称，100字以内"
                        type="textarea"
                        maxlength="100"
                        show-word-limit
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="handleClose()">取 消</el-button>
                    <el-button type="primary" @click="openPromise()">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <zPreview ref="preview"></zPreview>
    </div>
</template>

<script>
import zPreview from "@/components/zPreview"
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            form: {
                IntroductionLetter: {},
                Assignment: {},
            },
            rules: {
                "IntroductionLetter.name": [
                    { required: true, message: "请选择介绍信", trigger: "blur" },
                    // { validator: filetype, trigger: "blur" }
                ],
                "Assignment.name": [{ required: true, message: "请选择任务书", trigger: "blur" }],
                CertificateNo: [{ required: true, message: "请输入法案证书编号", trigger: "blur" }],
                DataUseArea: [{ required: true, message: "请输入资料使用范围", trigger: "blur" }],
                DataPurpose: [{ required: true, message: "请输入资料用途", trigger: "blur" }],
                // dataInfo: [{ required: true, message: "请输入借阅资料信息明细", trigger: "blur" }],
            },
            AssignmentState: "success_state",
            IntroductionLetterState: "success_state",
        }
    },
    props: {
        dataInfo: Object,
        ztype: String,
    },
    components: { zPreview },

    computed: {},
    watch: {
        // dataInfo(val) {
        //     console.log("🚀 ~ file: dialog.vue ~ line 83 ~ dataInfo ~ val", val)
        //     this.form = val
        // }
    },
    mounted() {
        this.form = this.dataInfo
    },

    methods: {
        handleClose() {
            this.dialogVisible = !this.dialogVisible
        },
        async onSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.ztype == "again") return this.again()
                    const formData = new FormData()

                    formData.append("DataInfo", JSON.stringify(this.dataInfo))
                    formData.append("IntroductionLetter", this.form.IntroductionLetter)
                    formData.append("Assignment", this.form.Assignment)
                    formData.append("CertificateNo", this.form.CertificateNo)
                    formData.append("DataUseArea", this.form.DataUseArea)
                    formData.append("DataPurpose", this.form.DataPurpose)

                    const { code, msg } = await this.$store.dispatch("borrowForm/addBorrowingForm", formData)

                    if (code === 200) {
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            message: "申请提交成功！<br/>3日内收到审核回复，请关注审核信息！",
                            type: "success",
                            center: true,
                            customClass: "zmessage",
                        })
                        this.$router.push("/BorrowForm")
                        this.handleClose()
                    }
                } else {
                    return false
                }
            })
        },
        //打开选择文件框
        getFile(prop) {
            this.$refs[prop].click()
            this.$refs[prop].value = ""
        },
        //获取 选择的文件
        handleClick(e, prop) {
            const files = e.target.files[0]
            const fileType = ["docx", "pdf", "png", "PNG", "JPG", "jpg", "jpeg", "JPEG"]
            if (fileType.indexOf(files.name.split(".")[1]) != -1) {
                this.$set(this.form, prop, files)
                this[prop + "State"] = "success_state"
            } else {
                this.$message.error("请选择docx、pdf、png、jpg文件")
            }
        },
        async getServerFile(val) {
            let filedata = {
                url: val,
                data: { id: this.form.id },
            }
            const res = await this.$store.dispatch("borrowForm/getServeFile", filedata)

            if (res.type === "text/plain") {
                // 说明是普通对象数据，读取信息
                const fileReader = new FileReader()
                fileReader.onloadend = () => {
                    try {
                        const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
                        // 后台信息
                        this.$message.error(jsonData.msg)
                    } catch (err) {
                        // 解析成对象失败，说明是正常的文件流
                        // 下载文件
                    }
                }

                fileReader.readAsText(res)
            } else {
                this.$store.state.borrowForm.previewType = {
                    url: this.zpublic.PreviewText(res),
                    type: res.type,
                    data: res.res,
                }
                this.$refs.preview.dialogVisible = true
            }
        },
        async again() {
            const formData = new FormData()
            if (this.form.IntroductionLetter.size) formData.append("IntroductionLetter", this.form.IntroductionLetter)
            if (this.form.Assignment.size) formData.append("Assignment", this.form.Assignment)
            formData.append("DataInfo", JSON.stringify(this.dataInfo))
            formData.append("CertificateNo", this.form.CertificateNo)
            formData.append("DataUseArea", this.form.DataUseArea)
            formData.append("DataPurpose", this.form.DataPurpose)
            formData.append("id", this.form.id)

            const { code, msg } = await this.$store.dispatch("borrowForm/updateBtnBorrowingForm", formData)

            if (code === 200) {
                this.$message({
                    dangerouslyUseHTMLString: true,
                    message: "提交成功！<br/>3日内收到审核回复，请关注审核信息！",
                    type: "success",
                    center: true,
                    customClass: "zmessage",
                })
                this.$router.push("/BorrowForm")
                this.handleClose()
            }
        },
        openPromise(e, prop) {
            const h = this.$createElement
            this.$msgbox({
                title: "提示",
                message: h("p", null, [h("span", { style: "color: red" }, "请确认您的材料已全部上传且真实有效。")]),
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                beforeClose: (action, instance, done) => {
                    if (action === "confirm") {
                        this.onSubmit()
                        done()
                    } else {
                        done()
                    }
                },
            }).then((action) => {})
        },
    },
}
</script>
<style lang='scss' scoped>
.upload {
    display: flex;
    justify-items: center;

    i {
        font-size: 0.5rem;
        padding: 0 10px;
    }
}

.el-form-item {
    a {
        width: 100%;
        overflow: hidden;
        margin: 0;
        text-align: left;
    }
}
.file_state {
    display: inline-block;
    width: 60px;
    i {
        font-size: 18px;
    }
}
.success_state {
    color: #67c23a;
}
// ::v-deep .el-message__content {
//     font-size: 22px !important;
//     padding-bottom: 10px;
// }
// .zmessage {
// }
</style>